<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import TabBar from '@/components/TabBar.vue'
</script>

<template>
  <router-view v-slot="{ Component, route }">
    <!-- 顶部navBar -->
    <NavBar v-if="route.meta.showNavBar" :title="route.meta.navBarTitle" />

    <keep-alive>
      <component v-if="route.meta.keepAlive" :is="Component" :key="route.name" />
    </keep-alive>
    <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />

    <!-- 底部tabBar -->
    <TabBar v-if="route.meta.showTabBar" :active="route.meta.tabBarIndex" />
  </router-view>
</template>

<style lang="scss">
:root {
  /** 品牌色 **/
  --main-color: #0EC37B;
}

#app {
  font-size: 28px;
  line-height: 1.4;
  color: #333333;
}
</style>
